<template>
	<a-modal :confirm-loading="handing" :width="800" v-model:open="showForm" @ok="submit">
		<a-form ref="form" :model="formData" :rules="rules" :labelCol="{ span: 5 }" :wrapperCol="{ span: 16, offset: 1 }">
			<a-form-item name="type" label="类型" v-if="formData.id>0">
				{{types[formData.type - 1] ?? '---'}}
			</a-form-item>
			<a-form-item name="type" label="类型" v-else>
				<a-radio-group v-model:value="formData.type">
					<a-radio v-for="(v, i) in types" :value="i+1">{{v}}</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-form-item name="title" :label="formData.type == 5 ? '题干' : '标题'">
				<a-textarea v-model:value="formData.title" />
			</a-form-item>
			<a-form-item name="bank_id" label="题库">
				<relate-selector v-model:value="formData.bank_id" :label="formData.bank_name" field="name" path="ques-bank?pageSize=10000" />
			</a-form-item>
			<a-form-item name="analysis" label="解析" v-if="formData.type <= 4">
				<a-textarea v-model:value="formData.analysis" />
			</a-form-item>
			<a-form-item name="status" label="开放">
				<a-switch v-model:checked="formData.status" checked-children="是" :checked-value="2" un-checked-children="否" :un-checked-value="1" />
			</a-form-item>
			<a-form-item label="答案" v-if="formData.type == 3">
				<a-radio-group :value="formData.answers.findIndex(r=>r.is_right==1)" button-style="default" @change="(e:any)=>chengeTag(e.target.value, formData.answers)">
					<a-radio :value="0">A: 正确</a-radio>
					<a-radio :value="1">B: 错误</a-radio>
				</a-radio-group>
			</a-form-item>
			<a-divider v-if="formData.type<3">
				<a-button shape="circle" size="small" @click="delAnswer(formData.answers)">
					<template #icon><MinusOutlined /></template>
				</a-button>
				<span class="mx-4">
					答案({{formData.answers.length}})
				</span>
				<a-button shape="circle" size="small" @click="addAnswer(formData.answers)">
					<template #icon><PlusOutlined /></template>
				</a-button>
			</a-divider>
			<a-form-item 
				v-if="formData.type < 3"
				v-for="(item, i) in formData.answers"
				:name="['answers', i, 'value']"
				:rules="rules['answers.*.value']"
			>
				<template #label>
					<a-checkable-tag :checked="item.is_right==1" @change="()=>chengeTag(i, formData.answers, formData.type!==2)">选项 {{item.key}}</a-checkable-tag>
				</template>
				<editor v-model:value="item.value" />
			</a-form-item>
			<a-tabs v-if="formData.type == 5" v-model:activeKey="tab" type="editable-card" centered @edit="editTab">
				<a-tab-pane :key="k" :tab="(k+1) + ' ' + types[item.type-1]" force-render v-for="(item, k) in formData.children">
					<a-form-item :name="['children', k, 'type']" label="类型" v-if="item.id===undefined">
						<a-radio-group v-model:value="item.type">
							<a-radio v-for="(v, i) in types.slice(0, 4)" :value="i+1">{{v}}</a-radio>
						</a-radio-group>
					</a-form-item>
					<a-form-item :name="['children', k, 'title']" :rules="rules['children.*.title']" label="标题">
						<a-input v-model:value="item.title" />
					</a-form-item>
					<a-form-item :name="['children', k, 'analysis']" :rules="rules['children.*.analysis']" label="解析">
						<a-textarea v-model:value="item.analysis" />
					</a-form-item>
					<a-divider v-if="item.type<3">
						<a-button shape="circle" size="small" @click="delAnswer(item.answers)">
							<template #icon><MinusOutlined /></template>
						</a-button>
						<span class="mx-4">
							答案 ({{item.answers?.length}})
						</span>
						<a-button shape="circle" size="small" @click="addAnswer(item.answers)">
							<template #icon><PlusOutlined /></template>
						</a-button>
					</a-divider>
					<a-form-item v-if="item.type<3" :name="['children', k, 'answers', i, 'value']" :rules="rules['children.*.answers.*.value']" v-for="(answer, i) in item.answers">
						<template #label>
							<a-checkable-tag :checked="answer.is_right==1" @change="()=>chengeTag(i, item.answers, item.type!==2)">选项 {{answer.key}}</a-checkable-tag>
						</template>
						<editor v-model:value="answer.value" />
					</a-form-item>
					<a-form-item label="答案" v-else-if="item.type==3">
						<a-radio-group :value="item.answers?.findIndex(r=>r.is_right==1)" button-style="default" @change="(e:any)=>chengeTag(e.target.value, item.answers)">
							<a-radio :value="0">A: 正确</a-radio>
							<a-radio :value="1">B: 错误</a-radio>
						</a-radio-group>
					</a-form-item>
				</a-tab-pane>
			</a-tabs>
		</a-form>
	</a-modal>
</template>
<script lang="ts">
import { page, form } from "@/mixins"
import { message } from 'ant-design-vue';

export default {
	mixins: [page, form],
	data() {
		return {
			showForm: false as boolean,
			formPath: 'ques',
			tab: 0,
			formData: {
				id: undefined,
				title: '',
				type: 1,
				bank_id: 0,
				bank_name: '',
				status: 1,
				analysis: '',
				answers: [
					{ key: 'A', value: '', is_right: 1 },
					{ key: 'B', value: '', is_right: 0 },
					{ key: 'C', value: '', is_right: 0 },
					{ key: 'D', value: '', is_right: 0 }
				],
				children: [{
					title: '',
					analysis: '',
					type: 1,
					answers: [
						{ key: 'A', value: '', is_right: 1 },
						{ key: 'B', value: '', is_right: 0 },
						{ key: 'C', value: '', is_right: 0 },
						{ key: 'D', value: '', is_right: 0 }
					]
				}]
			},
			rules: {
				title: { required: true, trigger: 'change' },
				type: { type: 'number', min: 1, trigger: 'change', message: '请选择题目类型' },
				bank_id: { type: 'number', min: 1, required: true, trigger: 'change', message: '题库不能为空' },
				analysis: { required: true, trigger: 'change' },
				'answers.*.value': { type: 'string', required: true,  message: "答案内容必须", trigger: "change" },
				'children.*.title': { required: true, trigger: 'change' },
				'children.*.analysis': { required: true, trigger: 'change' },
				'children.*.answers.*.value':  { type: 'string', required: true,  message: "答案内容必须", trigger: "change" }
			},
			types: ['单选', '多选', '判断', '简答', '综合']
		}
	},
	methods: {
		add() {
			Object.assign(this.formData, {
				id: undefined,
				title: '',
				bank_id: 0,
				bank_name: '',
				type: 1,
				analysis: '',
				answers: [
					{ key: 'A', value: '', is_right: 1 },
					{ key: 'B', value: '', is_right: 0 },
					{ key: 'C', value: '', is_right: 0 },
					{ key: 'D', value: '', is_right: 0 }
				]
			})
			this.showForm = true;
		},
		edit(record : {id: number}) {
			this.handing = true
			useGet(this.formPath + '/' + record.id).then((res: object) => {
				Object.assign(this.formData, res)
			}).finally(()=>{
				// this.$refs.uModal && this.$refs.uModal.clearLoading()
				this.handing = false
			}).catch(() => {
			})
		
			Object.assign(this.formData, record);
			this.showForm = true
		},
		afterSubmit(data: object){
			this.$emit('change', data);
			this.showForm = false
		},
		chengeTag(v: number, answers: {is_right: number}[], single: boolean = true) {
			const r = answers[v];
			r.is_right = [1, 0][r.is_right];
			// 单选时,要把其他项置为0
			single && answers.map((r: {is_right: number}, i: number) => {
				v != i && (r.is_right = 0)
			})
		},
		addAnswer(answers: {key: string, value: string, is_right: number}[]){
			answers.length < 8 && answers.push(
				{ key: ['A','B','C','D','E','F','G','H'][answers.length], value: '', is_right: 0 }
			)
		},
		delAnswer(answers: object[]){
			answers.length > 4 && answers.pop()
		},
		editTab (key: string, action: string) {
			const children = this.formData.children
		  if (action === 'add') {
		    children.push({
					title: '',
					analysis: '',
					type: 1,
					answers: [
						{ key: 'A', value: '', is_right: 1 },
						{ key: 'B', value: '', is_right: 0 },
						{ key: 'C', value: '', is_right: 0 },
						{ key: 'D', value: '', is_right: 0 }
					]
				})
				this.tab = children.length-1
		  } else {
				if(children.length < 2){
					message.error('至少需要一个子题目')
				} else {
					children.splice(parseInt(key), 1)
					this.tab = Math.min(children.length - 1, this.tab)
				}
		  }
		}
	}
}
</script>
